<template>
  <div id="home">
    <HomeBanner :carousel="animeMsg.carousel.data" />
    <div class="home-main">
      <div class="home-main__col">
        <AnimeTimeTable title="新番动态" :data="animeMsg.perweek" />
      </div>
      <div class="home-main__col">
        <TheatreAnime title="剧场版" :theatreAnime="animeMsg.theatreAnime.data" />
      </div>
      <div class="home-main__col">
        <OtherAnime title="完结日漫" :overData="animeMsg.japanAnime.data" />
      </div>
      <div class="home-main__col">
        <OtherAnime title="热门国漫" :overData="animeMsg.chineseCartoon.data" />
      </div>
    </div>
  </div>
</template>

<script>
import { shallowReactive } from 'vue'

import HomeBanner from './components/HomeBanner.vue'
import AnimeTimeTable from './components/AnimeTimeTable.vue'
import TheatreAnime from './components/TheatreAnime.vue'
import OtherAnime from './components/OtherAnime.vue'

// import { FAKE_GETINDEX } from '@/api/fake_api_data'

import { getHomeMixData } from '@/api/index'

export default {
  name: 'Home',
  components: {
    HomeBanner,
    AnimeTimeTable,
    TheatreAnime,
    OtherAnime
  },
  setup() {
    const animeMsg = shallowReactive({
      carousel: [],
      perweek: [],
      japanAnime: [],
      chineseCartoon: [],
      theatreAnime: []
    })

    ;(async () => {
      const data = await getHomeMixData()
      if (data) {
        Object.entries(data).forEach(([k, v]) => {
          animeMsg[k] = v
        })
      }
    })()

    return {
      animeMsg
    }
  }
}
</script>

<style lang="scss" scoped>
#home {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $box_bg;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  overflow-y: auto;
}

.home-main {
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  &__col {
    display: flex;
    width: 100%;
    gap: 40px;
    margin-bottom: 40px;
  }
}
</style>
